/**
 * 测试 this.setState 和 useState 对于设置相同的值，都可以防止重新执行渲染
 */

import React from 'react';

import styles from './this_set_state.css';
import { render } from 'react-dom';

export default class extends React.PureComponent {
  constructor(props: any) {
    super(props);
    this.state = {
      a: 1,
      b: 2,
      obj: {
        c: 3,
        d: 4,
      },
    };
  }
  increaseA = () => {
    this.setState(state => ({ a: 1 })); // 设置相同的 key:value 不变，不会引发重新渲染
  };
  changeObjC = () => {
    this.setState(state => ({ obj: { c: state.obj.c + 1 } })); // 但是深层次修改，容易忘了带上其他成员，最终丢掉其他成员
  };
  render() {
    console.log('rendered');
    return (
      <div className={styles.normal}>
        <h1>Page this_set_state</h1>
        <div> a = {this.state.a}</div>
        <button onClick={this.increaseA}>insceaseA</button>
        <div>
          {' '}
          obj.c = {this.state.obj.c} obj.d = {this.state.obj.d}
        </div>
        <button onClick={this.changeObjC}>changeObjC</button>
      </div>
    );
  }
}
